<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新冠疫情追踪</title>
    <link rel="stylesheet" type="text/css" href="static/semantic.min.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="static/semantic.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#filter").click(function(){
                const city = $("#city").val();
                window.location.href = "http://" + window.location.host + "/coronavirus?city=" + city;
            });
            $("#sync").click(function(){
               $.get("{{ sync_data_url }}", function(result){
                   alert("Message:" + result.message)
               })
            });
        })
    </script>
</head>

<body>
    <div class="ui container">
        <h2></h2>
        <h1 style="text-align: center">新冠疫情追踪器</h1>
        <h2></h2>

        <button id="filter" class="ui button alert_secondary" style="float: left" type="submit">
            过滤
        </button>
        <div class="ui input">
            <label for="city"></label>
            <input type="text" id="city" placeholder="城市">
        </div>
        <button id="sync" class="ui button primary" style="float: right" type="submit">
            同步数据
        </button>

        <table class="ui celled table">
            <thead>
                <tr>
                    <th>城市</th>
                    <th>日期</th>
                    <th>累计确诊数</th>
                    <th>累计死亡数</th>
                    <th>累计治愈数</th>
                    <th>更新时间</th>
                </tr>
            </thead>
            <tbody>
                {% for d in data %}
                <tr>
                    <td>{{ d.city.province }}</td>
                    <td>{{ d.date }}</td>
                    <td>{{ d.confirmed }}</td>
                    <td>{{ d.deaths }}</td>
                    <td>{{ d.recovered }}</td>
                    <td>{{ d.updated_at }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</body>

</html>